<template>
  <ChartComp id="guideComp" :message="guideCompMessage" />
</template>

<script>
import 'echarts-wordcloud/dist/echarts-wordcloud.min'
const colorList = [
  '#cca8ba',
  '#88cc81',
  '#82a0c5',
  '#fddb7e',
  '#735ba1',
  '#bda29a',
  '#6e7074',
  '#546570',
  '#c4ccd3',
  '#3a96f5',
  '#5faaf7',
  '#78bafe',
  '#1563f2',
  '#add2f8',
  '#e24bf4',
  '#1acaff',
  '#ffde00',
  '#89fda5',
  '#fda67e',
  '#FF9898',
  '#A898FF',
  '#7AE0F2',
  '#EBFF98',
  '#62A4FF',
  '#CC98FF',
  '#546570',
  '#c4ccd3',
  '#3a96f5',
  '#5faaf7',
  '#78bafe',
  '#1563f2',
  '#add2f8',
  '#e24bf4',
  '#1acaff',
  '#ffde00',
  '#89fda5',
  '#fda67e',
]
const chartData = [
  {
    name: '材料科学',
    value: 77
  },
  {
    name: '化学',
    value: 30
  },
  {
    name: '生物学',
    value: 40
  },
  {
    name: '物理学',
    value: 70
  },
  {
    name: '基础医学',
    value: 500
  },
  {
    name: '环境科学技术及资源科学技术',
    value: 80
  },
  {
    name: '药学',
    value: 120
  },
  {
    name: '电子与通信技术',
    value: 60
  },
  {
    name: '农学',
    value: 35
  },
  {
    name: '机械工程',
    value: 20
  },
  {
    name: '食品科学技术',
    value: 20
  },
  {
    name: '地球科学',
    value: 20
  },
  {
    name: '临床医学',
    value: 20
  },
  {
    name: '化学工程',
    value: 77
  },
  {
    name: '工程与技术科学基础学科',
    value: 30
  },
  {
    name: '信息科学与系统科学',
    value: 40
  },
  {
    name: '能源科学技术',
    value: 70
  },
  {
    name: '中医学与中药学',
    value: 50
  },
  {
    name: '动力与电气工程',
    value: 80
  },
  {
    name: '自然科学相关工程与技术',
    value: 120
  },
  {
    name: '显微镜',
    value: 60
  },
  {
    name: '热分析仪器',
    value: 35
  },
  {
    name: '生化分析仪器',
    value: 20
  },
  {
    name: '物理性能测试仪器',
    value: 20
  },
  {
    name: '计量仪器与基标准',
    value: 20
  },
  {
    name: '激光器',
    value: 20
  },
]
export default {
  components: {
  },
  props: {
    id: {
      require: true,
      type: String,
      default: ''
    },
    year: {
      require: true,
      type: String,
      default: ''
    }
  },
  watch: {
    year: {
      handler() {
        this.initMessage()
      }
    },
    id: {
      handler() {
        this.initMessage()
      }
    },
    deep: true
  },
  data() {
    return {
      guideCompMessage: {}
    }
  },
  created() {
    this.initMessage()
  },
  mounted() {
  },
  methods: {
    initMessage() {
      this.guideCompMessage = {
        tooltip: {
          show: true,
          trigger: 'item',
          className: 'LineChart-tooltip',
          extraCssText: `background-color: rgba(0, 21, 50, 0.8);
            color: #fff;
            border: 1px solid #214D87;
            border-color: #214D87;
            box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
            border-radius: 4px;`,
          formatter: function (params) {
            var res =
              params.name +
              '<br/>' +
              '资源数量：' +
              params.data.value +
              '（个）'
            return res
          }
        },
        grid: {
          left: '0',
          bottom: '0',
          top: '0',
          right: '0'
        },
        xAxis: {
          type: 'category',
          show: false
        },
        yAxis: {
          max: 100,
          show: false
        },
        series: [
          {
            type: 'wordCloud',
            //用来调整词之间的距离
            gridSize: 15,
            //用来调整字的大小范围
            sizeRange: [10, 21],
            //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
            // rotationRange: [-45, 0, 45, 90],
            // rotationRange: [0, 90],
            rotationRange: [0, 0],
            //随机生成字体颜色
            // maskImage: maskImage,
            textStyle: {
              fontFamily: 'sans-serif',
              color: function () {
                let index = Math.floor(Math.random() * colorList.length)
                return colorList[index]
              }
            },
            //位置相关设置
            left: 'center',
            top: 'center',
            right: null,
            bottom: null,
            width: '100%',
            height: '100%',
            data: chartData
          }
        ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>